<template>
  <div class="box">
    
    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
        <ul class="shopLie">
          <li v-for="(item, i) in shopLie" @click="fenlei()" v-show="i < 8" :key="i">
            <img :src="'https://fuss10.elemecdn.com' + item.image_url" alt="" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </van-swipe-item>
      <van-swipe-item>
        <ul class="shopLie">
          <li v-for="(item, i) in shopLie" @click="fenlei()" v-show="i >= 8" :key="i">
            <img :src="'https://fuss10.elemecdn.com' + item.image_url" alt="" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { ajax_shopLie, ajax_jinShop } from "../ajax/index";
// Vue.component('myCom',{
//     template:'#com1',
// })
export default {
  name: "",
  data() {
    return {
      shopLie: [],
    };
  },
  created() {
    ajax_shopLie({}).then((data) => {
      //   console.log(data);
      this.shopLie = data;
    //   console.log(this.shopLie);
    });
    
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  height: 32vh;
  text-align: center;
  background-color: rgb(209, 130, 26, 0.1);
}

.box >>> .van-swipe__indicator--active {
  
  background-color: blue !important;
}
.box >>> .van-swipe__indicator{
    background-color:gray;
}
ul {
  width: 100vw;
  height: 32vh;
  position: relative;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: white;
  position: absolute;
}
ul img {
  width: 65%;
  height: 65%;
}
ul p {
  color: black;
  font-size: 13px;
}
ul li {
  width: 25vw;
  text-align: center;
  font-style: normal;
  list-style: none;
}

</style>